.wrapper {
  overflow: scroll;
}

.table {
  // border-collapse: collapse;
  border-collapse: separate;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;

  th,
  caption {
    text-align: start;
  }

  caption {
    margin-block: 0.75rem;
  }
  th,
  td {
    border: 1px solid lightgrey;
    padding: 0.25rem 0.75rem;
    vertical-align: baseline;
    border-right: 0;
    border-bottom: 0;
    &:last-child {
      border-right: 1px solid lightgrey;
    }
  }
  thead {
    background: whitesmoke;
    position: sticky;
    z-index: 2;
    top: 0;
    th {
      vertical-align: bottom;
      border-block-end: 2px solid;
    }
  }
  tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: whitesmoke;
    th {
      border-block: 2px solid;
    }
  }
  tbody {
    tr:first-child td {
      border-top: 0;
    }
  }

  th,
  td {
    &:first-child {
      left: 0;
      position: sticky;
      background-color: whitesmoke;
      z-index: 1;
      border-left: 1px solid lightgrey;
      border-right: 1px solid lightgrey;
    }
    &:nth-of-type(2) {
      border-left: 0;
    }
  }

  thead th,
  tfoot th {
    background: whitesmoke;
  }
}
